<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar
      class="navbar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 用户信息 -->
    <!-- input:file的属性 -->
    <!-- accept:显示file选择的文件后缀名  hidden：隐藏input:file -->
    <!-- el.click() -->
    <van-cell title="头像" is-link @click="$refs.file.click()">
      <van-image round width="0.8rem" height="0.8rem" :src="UserInfo.photo" />

      <input
        type="file"
        hidden
        accept=".png,.jpg,.jpeg"
        ref="file"
        @change="selectPhoto"
      />
    </van-cell>

    <van-cell title="昵称" is-link :value="UserInfo.name" @click="showPopup" />

    <van-cell
      title="性别"
      is-link
      :value="UserInfo.gender === 0 ? '女' : '男'"
      @click="showPopup2"
    />

    <van-cell
      title="生日"
      is-link
      :value="UserInfo.birthday"
      @click="showPopup3"
    />

    <!-- 头像弹层 -->
    <van-popup
      class="avator-popup"
      v-model="isShowAvator"
      closeable
      position="bottom"
      :style="{ height: '100%', width: '100%' }"
    >
      <update-avator
        :photo="photo"
        v-if="isShowAvator"
        @update-avator="UserInfo.photo = $event"
      ></update-avator>
    </van-popup>

    <!-- 姓名弹层 -->
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '100%', width: '100%' }"
    >
      <update-name @update-name="UserInfo.name = $event"></update-name>
    </van-popup>

    <!-- 性别弹层 -->
    <van-popup
      v-model="show2"
      position="bottom"
      :style="{ height: '50%', width: '100%' }"
    >
      <update-sex @update-sex="UserInfo.gender = $event"></update-sex>
    </van-popup>

    <!-- 生日弹层 -->
    <van-popup
      v-model="show3"
      position="bottom"
      :style="{ height: '45%', width: '100%' }"
    >
      <update-age @update-age="UserInfo.birthday = $event"></update-age>
    </van-popup>
  </div>
</template>

<script>
import { getUserInfo } from '@/api'
import UpdateAvator from './components/UpdateAvator.vue'
import UpdateName from './components/UpdateName.vue'
import UpdateSex from './components/UpdateSex.vue'
import UpdateAge from './components/UpdateAge.vue'
import { resolveTobase64 } from '@/utils'
export default {
  name: 'User',
  components: {
    UpdateAvator,
    UpdateName,
    UpdateSex,
    UpdateAge
  },
  data() {
    return {
      UserInfo: {},
      isShowAvator: false,
      photo: '',
      show: false,
      show2: false,
      show3: false
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      try {
        const { data } = await getUserInfo()
        this.UserInfo = data.data
        console.log(data)
      } catch (error) {
        this.$toast.fail('获取用户信息失败，请刷新')
      }
    },
    async selectPhoto(e) {
      // !用户选择图片后如何显示图片?
      // 1. 获取file对象  --> e.target.files
      // 2. 把file对象转成img的src可识别的格式
      //    - objectUrl  --> URL.createObjectUrl(file对象)
      // - 缺点: 内存泄露  因为跟document绑定在一起
      // - 优点: 写法简单
      //    - Base64   --> FileReader(读文件对象)
      // - fr.readAsDataURL(file)
      // - fr.onload = (e)=>{  e.target.result  }

      //? 1 获取用户选择的文件的对象
      //? - e.target 触发事件元素
      //? - HTMLInputElement.files 伪数组, 存储的用户选择所有的文件对象
      const file = e.target.files[0]
      // console.log(file)

      //? 2.把file文件对象处理成img标签可识别的url
      //? URL.createObjectURL(file对象) --> img标签可识别的url
      // const url = window.URL.createObjectURL(file)

      // //? 3. 传递url
      // this.photo = url

      // //? 清空value 让用户可以选择同一张图片
      // e.target.value = ''

      // //? 展示弹层组件
      // this.isShowAvator = true

      //! base64 方法
      // const fr = new FileReader()
      // fr.readAsDataURL(file)

      // fr.onload = (e) => {
      //   // 3. 传递url
      //   this.photo = e.target.result

      //   //? 清空value 让用户可以选择同一张图片
      //   e.target.value = ''

      //   //? 展示弹层组件
      //   this.isShowAvator = true
      // }

      //! base64 方法 封装

      const url = await resolveTobase64(file)

      //? 3. 传递url
      this.photo = url

      //? 清空value 让用户可以选择同一张图片
      e.target.value = ''

      //? 展示弹层组件
      this.isShowAvator = true
    },
    showPopup() {
      this.show = true
    },
    showPopup2() {
      this.show2 = true
    },
    showPopup3() {
      this.show3 = true
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.navbar) {
  background-color: #3296fa;

  .van-nav-bar__title {
    color: #fff;
  }
  .van-icon {
    color: #fff;
    font-size: 32px;
  }
}
.avator-popup {
  background-color: #000;
}
</style>
